<template>
	<my-form ref="formObj" :title="completeTitle" :readonly="readonly" @form-submit="formSubmit" @form-reset="formReset"
	 @form-created="formCreated" @form-alert-dismissed-success="formAlertDismissedSuccess" @form-view-back="formViewBack">
		<b-form-group label="父级目录" label-for="parent-elem">
			<b-form-select id="parent-elem" :disabled="readonly" v-model="form.parentId">
				<option v-for="c in items" :key="c.id" :value="c.id" :selected="c.id === form.parentId">
					<span v-for="x in c.lv">---</span> {{c.name}} - {{c.aliasName}}
				</option>
			</b-form-select>
		</b-form-group>
		<b-form-group label="目录名称" label-for="name-elem">
			<b-form-input id="name-elem" required :readonly="readonly" v-model="form.name" placeholder="目录名称"></b-form-input>
		</b-form-group>
		<b-form-group label="目录别名" label-for="alias-name-elem">
			<b-form-input id="alias-name-elem" :readonly="readonly" required v-model="form.aliasName" placeholder="目录别名"></b-form-input>
		</b-form-group>
		<b-form-group label="目录备注" label-for="remark-elem">
			<b-form-textarea id="remark-elem" :readonly="readonly" v-model="form.remark" placeholder="目录备注" rows="3"></b-form-textarea>
		</b-form-group>
	</my-form>
</template>

<script>
	import axios from 'axios'
	import gl from '../commons/global_variable.js'
	import MyForm from '../commons/Form.vue'

	export default {
		name: "CatalogDetails",
		components: {
			MyForm
		},
		data: function() {
			return {
				title: "分类目录",
				form: {
					id: 0,
					parentId: 0,
					name: "",
					aliasName: "",
					remark: ""
				},
				items: [],
				readonly: false
			}
		},
		created: function() {
			this.$store.commit('menuFoucsOpr', 'catalog')
		},
		methods: {
			formCreated: function() {
				this.form.parentId = this.$route.params.parentId
				var that = this
				if (this.$route.params.id) {
					const message = "查询ID为" + this.$route.params.id + "的记录时出现异常"
					axios.get(gl.cms_args.server_url + 'catalog/detail?id=' + this.$route.params.id).then(function(response) {
						var res = response.data
						if (res.code === gl.cms_args.success) {
							that.form = res.data
						} else {
							that.$refs.formObj.onQueryError(message)
						}
					}).catch(function(error) {
						that.$refs.formObj.onQueryError(message)
					})
				}
				const listMessage = "查询分类目录列表时出现异常"
				axios.get(gl.cms_args.server_url + 'catalog/list').then(function(response) {
					var res = response.data
					if (res.code === gl.cms_args.success) {
						that.items = res.data
					} else {
						that.$refs.formObj.onQueryError(listMessage)
					}
				}).catch(function(error) {
					that.$refs.formObj.onQueryError(listMessage)
				})
				if (this.$route.params.readonly === true) {
					this.readonly = true
				}
			},
			formSubmit: function() {
				var that = this
				axios.post(gl.cms_args.server_url + 'catalog/sou', this.form).then(function(response) {
					var res = response.data
					if (res.code === gl.cms_args.success) {
						that.$refs.formObj.onSaveSuccess()
					} else {
						that.$refs.formObj.onSaveError()
					}
				}).catch(function(error) {
					that.$refs.formObj.onSaveError()
				})
			},
			formReset: function() {
				this.form.name = ''
				this.form.aliasName = ''
				this.form.remark = ''
			},
			formAlertDismissedSuccess: function() {
				this.formViewBack()
			},
			formViewBack: function() {
				this.$router.push({
					path: "catalogs"
				})
			}
		},
		computed: {
			completeTitle: function() {
				return this.$route.params.title + this.title
			}
		}
	}
</script>

<style>
</style>
